<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>display普通表格</title>
  <style>
    .table, .table * {margin: 0 auto; padding: 0;font-size: 14px;font-family: Arial, 宋体, Helvetica, sans-serif;}
    .table {
      display: table;
      width: 80%;
      border-collapse: collapse;
    }
    .table-tr {
      display: table-row;
    }
    .table-th {
      display: table-cell;
      font-weight: bold;height: 100%;
      border: 1px solid gray;text-align:
      center;vertical-align: middle;
      background-color:#E5E5E5;
      padding: 10px 0;
    }
    .table-td {
      display: table-cell;
      height: 100%;
      border: 1px solid gray;
      text-align: center;
      vertical-align: middle;
      padding: 10px 0;
    }
    .table-header-group {
      display: table-header-group;
    }
    .table-row-group {
      display: table-row-group;
    }
  </style>
</head>
<body>
<div class="table">
  <div class="table-header-group">
    <div class="table-th">省份/直辖市</div>
    <div class="table-th">GDP(亿元)</div>
    <div class="table-th">增长率</div>
  </div>
  <div class="table-row-group">
    <div class="table-tr">
      <div class="table-td">
        广东广东广东广东广东广东广东广东广东广东广东
        广东广东广东广东广东广东广东广东广东广东广东广东广东
        广东广东广东广东广东广东广东广东广东广东广东广东广东
        广东广东广东广东广东广东广东广东
        广东广东广东广东广东广东广东广东广
        东广东广东广东广东广东广东
      </div>
      <div class="table-td">72812</div>
      <div class="table-td">8.0%</div>
    </div>
    <div class="table-tr">
      <div class="table-td">河南</div>
      <div class="table-td">37010</div>
      <div class="table-td">8.3%</div>
    </div>
    <div class="table-tr">
      <div class="table-td">江苏</div>
      <div class="table-td">70116</div>
      <div class="table-td">8.5%</div>
    </div>
  </div>
</div>
<script>
  // 饼图
  import { Component } from 'react'
  import { View } from '@tarojs/components'
  import './index.scss'
  import { EChart } from "echarts-taro3-react";

  export default class Index extends Component {

    componentDidMount() {
      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "horizontal",
          bottom: "bottom",
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      this.pieChart.refresh(option);
    }

    pieChart: any;
    refPieChart = (node) => (this.pieChart = node);

    render () {
      return (
        <View className='pie-chart'>
          <EChart ref={this.refPieChart} canvasId='pie-chart' />
        </View>
      )
    }
  }


</script>
</body>
</html>
